[Angular-1]ng-class問題紀錄1

發表於 更新於 分類於 ，

ng-class
這次我遇到的情況是想再controller控制一個變數，讓ng-class去判斷這個變數的內容改變他的CSS，但是是用Jquery的Listener去觸發。

先參考一些我在網路上查到的用法：
Angular官方網站
Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class

第一件事情是我想說ng-class如果成立的話能否直接蓋掉原本本的class:
設定html

1
2
3
4
5
6
7
<table>
  <tr>
    <td class="inputTd" ng-class="{'InputTooShort': tableInputTooShort}">
    	<input id="userInput" model="tableInput" />
    <td>
  </tr>
</table>

設定JS

1
2
3
4
5
6
7
8
$scope.tableInputTooShort = false;
$('#userInput').bind('focusout', function ($scope) {
	if(tableInput.length < 3) {
		$scope.tableInputTooShort = true;
	}else {
		$scope.tableInputTooShort = true;
	}
});

設定CSS

1
2
3
4
5
6
.inputTd {
   border: 1px solid #999;
}
.InputTooShort {
    border: 2px solid red !important;
}

此時出現很神奇的Bug，每當我輸入的字串小於三個字元並且滑鼠點出input去觸發他的focusout，$scope.tableInputTooShort這個變數會變成true沒錯，但是這個tag的class並沒有更新，反而是我再點入input輸入格隨意輸入換刪除一個字元他的class才會更新為InputTooShort這個CSS，反之，當他被InputTooShort這個CSS更新後我把字元輸入到三個以上後點出input讓focusout把$scope.tableInputTooShort這個變數會變成false時class依然沒有更新，也是要再我重新點回input刪除或輸入任意字元才會更新為inputTd，但這不是我要的效果，我希望的是觸發focusout之後，的CSS就應該要更新了。

起初以為是判斷式的關係，但我試了很多判斷式還是都一樣，目前功力太淺也還找不出原因，只好再直接求助Angular的驗證式：
設定html

1
2
3
4
5
6
7
8
9
<table ng-form="form">
  <tr>
    <td class="inputTd" ng-class="form.pathDepartAddr$error.minlength ? 'InputTooShort' : 'inputTd'">
      <input id="userInput" model="tableInput"
      name="pathDepartAddr"
      ng-minlength="3" />
    <td>
  </tr>
</table>

其實這樣就直接也省下JS的程式碼了，雖然是成功有效果但我最初的希望會是點出格子外後才觸發更新CSS，但如果使用這個方法的話會比較像onchange一樣的效果，只要輸入或刪除任意字元就會一直觸發和刷新這個CSS。

form.pathDepartAddr$error.minlength可以參考我之前文章的解釋，值得注意的是雖然在input裡面我是寫ng-minlength=”3”，但是在ng-class裡面只有寫minlength不用加上ng-這串。